<template>
  <div class="itemMusic">
    <FooterMusicVue></FooterMusicVue>
    <!-- <ItemMusicListVue  /> -->
    <!-- 接受参数并利用参数 -->

    <!-- <van-button type="default" size="small" @click="back">返回</van-button> -->
    <!-- <h3>歌单详情页</h3> -->
    <div class="itemMusicTop">
      <!-- 后面背景虚化图 -->
      <img :src="topimg" alt="" class="bgimg" />
      <div class="itemLeft">
        <svg class="icon" aria-hidden="true" @click="back" color="#fff">
          <use xlink:href="#icon-direction-left" color="#fff"></use>
        </svg>
        <span>{{ changeCount(topcontent.playCount) }}</span>
      </div>
      <div class="itemRight">
        <svg class="icon" aria-hidden="true">
          <use xlink:href="#icon-search"></use>
        </svg>
        <svg class="icon" aria-hidden="true">
          <use xlink:href="#icon-menu"></use>
        </svg>
      </div>
    </div>

    <ItemMusicConVue />

    <div class="content">
      <div class="playimg">
        <div class="theimg">
        <img :src="topcontent.coverImgUrl" alt="" />
       </div>
        <div class="playcount">
          <span>
            <svg class="icon" aria-hidden="true">
              <use xlink:href="#icon-play"></use>
            </svg>
            {{ changeCount(topcontent.playCount) }}
          </span>
        </div>
      </div>
      <div class="contentRight">
        <p class="rightP_one">{{ topcontent.name }}</p>
        <div class="rigth_img">
          <img class="authorimg" :src="topcreator.backgroundUrl" alt="" />
          <span class="authorsp">{{ topcreator.nickname }} </span>
          <div class="auicon">
            <svg class="icon" aria-hidden="true">
              <use xlink:href="#icon-arrow-right"></use>
            </svg>
          </div>
        </div>
        <p class="rightP_two">
          <span class="spanone">{{ topcontent.description }}</span>
          <svg class="icon" aria-hidden="true">
            <use xlink:href="#icon-arrow-right"></use>
          </svg>
        </p>
      </div>
    </div>
    <div class="itemTopFooter">
      <div class="footerItem">
        <svg class="icon" aria-hidden="true">
          <use xlink:href="#icon-comment"></use>
        </svg>
        <span>{{ topcontent.commentCount }}</span>
      </div>
      <div class="footerItem">
        <svg class="icon" aria-hidden="true">
          <use xlink:href="#icon-link"></use>
        </svg>
        <span>{{ topcontent.shareCount }}</span>
      </div>
      <div class="footerItem">
        <svg class="icon" aria-hidden="true">
          <use xlink:href="#icon-download"></use>
        </svg>
        <span>下载</span>
      </div>
      <div class="footerItem">
        <svg class="icon" aria-hidden="true">
          <use xlink:href="#icon-success"></use>
        </svg>
        <span>多选</span>
      </div>
    </div>

    <div class="itemMusicLi">
      <div class="itemLit">
        <div class="leftList">
          <svg class="icon" aria-hidden="true">
            <use xlink:href="#icon-play"></use>
          </svg>
          <span>
            播放全部 <span>(共{{ gedanall.length }}首)</span></span
          >
        </div>
        <div class="RightList">
          <svg class="icon" aria-hidden="true">
            <use xlink:href="#icon-add"></use>
          </svg>
          <span>收藏({{ changeCount(singerSongData.subscribedCount) }})</span>
        </div>
      </div>
      <div class="allite" v-for="(item, i) in gedanall" :key="i">
        
        <div
          class="iteLis"
          :singer-data="item"
          :is-play-icon="true"
          @changeplay="changeSongIconStatus"
        >
          <div class="item" @click="playMusic(i)">
            <div class="theitemLeft" >
              <span class="leftSpan">{{ i + 1 }} </span>
            </div>
            <div class="musicsong">
              <p>{{ item.al.name }}</p>
            
              <span v-for="(itemone, index) in item.ar" :key="index">
                {{ itemone.name }}
              </span>
            
            </div>
          </div>
          
        </div>
        <div
          class="theitemRight"
          
        >
        <div >  
          <svg class="icon bofang" aria-hidden="true" v-if="item.mv != 0">
            <!-- <use
              :xlink:href="[isPlay ? '#icon-zanting' : '#icon-bofang']"
            ></use> -->
            <use xlink:href="#icon-play" > </use> 
          </svg>
        </div>
          <svg class="icon liebiao" aria-hidden="true">
            <use xlink:href="#icon-bofanggedan"></use>
          </svg>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
//通过引入拿到路由参数以及数据
import { useRoute } from "vue-router";
import { onMounted } from "vue";
import { getMusicItemList } from "@/request/api/item.js";

import ListItem from "../components/ListItem.vue";
//引入子组件
import Gedanbof from "../components/Gedanbof.vue";
import ItemMusicListVue from "@/components/item/ItemMusicList.vue";
import ItemMusicConVue from "@/components/item/ItemMusicCon.vue";

import FooterMusicVue from '../components/item/FooterMusic.vue';

import { mapMutations, mapState } from 'vuex';

export default {
  name: "ItemMusic",


  props:["itemList","subscribedCount"],

  props: {
    //歌手或者歌曲的数据
    singerData: {
      type: Object,
      default() {
        return {};
      },
    },

    //控制播放图标的显示和隐藏
    isPlayIcon: {
      type: Boolean,
      default: false,
    },
    
  },

  computed: {
    ...mapState(["currentAudioInfo", "$audio", "isMain", "isPlay"]),
  },

  data() {
    return {
      singerSongData: [],
      gedanlidegequ:[],
      topimg: [],
      topcontent: [],
      topcreator: [],
      //歌单所有歌曲
      gedanall: [],
      getprivileges: [],
    };
  },
  //使用子组件
  components: {
    FooterMusicVue,
    ItemMusicListVue,
    ItemMusicConVue,
    Gedanbof,
  },

  created() {
    let singerId = this.$route.params.id;
    // console.log("首页推荐歌单传过来的singerId==>", singerId);
    this.getSongtuijian(singerId);
    this.getSonggedan(singerId);
  },
  mounted(){

  },

  computed: {
    ...mapState({
      currentAudioInfo: "currentAudioInfo",

      isPlay(state) {
        // console.log("aaa");
        // console.log("state.isPlay ==> ", state.isPlay);
          
        //改变歌手的全部歌曲的播放图标状态
        for (let i = 0; i < this.singerSongData.length; i++) {
          if (this.singerSongData[i].id === this.currentAudioInfo.audioId) {
            this.singerSongData[i].isPlay = state.isPlay;
            break;
          }
        }

        return state.isPlay;
      },
    }),
  },

  methods: {
  // 跟这个它不一样 playMusic(){}
    playMusic(i){
      this.updatePlayList(this.gedanall);
      this.updatePlayListIndex(i)
    },



    ...mapMutations(["setAudioId", "setAudioPlayStatus","updatePlayList","updatePlayListIndex"]),

    //修改音频id
    changeAudioId() {
      //判断当前音频的id是否和点击播放的音频id一致
      if (this.currentAudioInfo.audioId === this.singerData.id) {
        // console.log("进来");
        //修改图标状态
        if (this.singerData.isPlay) {
          this.singerData.isPlay = false;
          //vuex, 修改音频播放状态
          this.setAudioPlayStatus(this.singerData.isPlay);
          this.$audio.pause();
        } else {
          this.singerData.isPlay = true;
          //vuex, 修改音频播放状态
          this.setAudioPlayStatus(this.singerData.isPlay);

          this.$audio.play();
        }
      } else {
        //触发组件的@changeplay事件通知父组件
        this.$emit("changeplay");

        this.singerData.isPlay = true;

        //vuex, 修改音频播放状态
        this.setAudioPlayStatus(this.singerData.isPlay);

        //vuex, 修改音频id
        this.setAudioId({
          audioId: this.singerData.id,
          singerName: this.singerData.singerName,
          songName: this.singerData.name,
          singerPic: this.singerData.picUrl,
        });
      }
    },

    //播放暂停音频
    changeAudioStatus() {
      if (this.currentAudioInfo.audioId === "") {
        return;
      }

      this.setAudioPlayStatus(!this.isPlay);
      if (this.isPlay) {
        this.$audio.play();
      } else {
        this.$audio.pause();
      }
    },

    changeSongIconStatus() {
      for(let i = 0; i < this.singerSongData.length; i++) {
        if (this.singerSongData[i].isPlay) {
          this.singerSongData[i].isPlay = false;
          break;
        }
      }
    },
    ...mapMutations(['backplay','play','duration','updateDuration','gettheLyricone','updateCurrentTime','updateIsbtnShow','updateDetailShow']),
  
    back:function() {
      // this.$refs.audio.paused
      
      let isback = true
      if (isback) {
        this.$children[0].backplay()
       
      }else{
        
      } 
      this.$router.back();
    },

    changeSongIconStatus() {
      for (let i = 0; i < this.singerSongData.length; i++) {
        if (this.singerSongData[i].isPlay) {
          this.singerSongData[i].isPlay = false;
          break;
        }
      }
    },

    //值千万 只保留一位小数
    changeCount: function (num) {
      if (num >= 100000000) {
        return (num / 100000000).toFixed(1) + "亿";
      } else if (num / 10000) {
        return (num / 10000).toFixed(1) + "万";
      }
    },

    getSongtuijian(singerId) {
      this.axios({
        method: "get",
        //获取歌单详情
        //接口地址
        url: "/playlist/detail",
        params: {
          id: singerId,
          //歌单最近s个收藏者
          s: 8,
          //   limit: 10,
          //   offset: 0
        },
      })
        .then((res) => {
          console.log('获取歌单详情 res ==> ', res);
          // let resres = res;
          // console.log("resres======>",resres);
          this.singerSongData = res.data.playlist;
          this.gedanlidegequ = res.data.playlist.tracks;
          console.log(
            "获取歌单详情的数据this.singerSongData==>",
            this.singerSongData
          );
          console.log(
            "获取歌单里面的歌曲信息this.gedanlidegequ==>",
            this.gedanlidegequ
          );

          this.topimg = res.data.playlist.coverImgUrl;
          // console.log("获取歌单详情头部图片this.topimg==>", this.topimg);
          this.topcontent = res.data.playlist;
          console.log(
            "获取歌单详情头部全部this.topcontent==>",
            this.topcontent
          );
          this.topcreator = res.data.playlist.creator;

          // this.singerSongData.push(...data);
        })
        .catch((err) => {
          console.log("err ==> ", err);
        });
    },

    getSonggedan(singerId) {
      this.axios({
        method: "get",
        //获取歌单所有歌曲
        //接口地址
        url: "/playlist/track/all",
        params: {
          id: singerId,
          //歌单最近s个收藏者

          limit: 10,
          offset: 0,
        },
      })
        .then((res) => {
          // console.log('获取歌单详情 res ==> ', res);
          this.gedanall = res.data.songs;
          console.log("获取歌单所有的歌曲this.gedanall==>", this.gedanall);
          this.privileges = res.data.privileges;
          // console.log("获取歌单所有的歌曲this.privileges==>", this.privileges);
        })
        .catch((err) => {
          console.log("err ==> ", err);
        });
    },
  },
};
</script>

<style lang="less" scoped>
.itemMusic {
  position: relative;
  .itemMusicTop {
    color: #fff;
    width: 100%;
    height: 50px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    // background-color: rgb(171, 171, 160);
    position: relative;

    .itemLeft,
    .itemRight {
      margin: 0 10px;
      width: 25%;
      height: 100%;
      display: flex;
      justify-content: space-between;
      align-items: center;

      span {
        font-size: 0.4rem;
        color: #fff;
      }
      .icon {
        fill: #fff;
        color: #fff;
      }
    }

    .itemLeft {
      margin-left: 10px;
      width: 25%;
      height: 100%;
      display: flex;
      justify-content: space-between;
      align-items: center;
      .icon {
        fill: #fff;
      }
      span {
        font-size: 0.4rem;
        color: #fff;
      }
    }

    .bgimg {
      // width: 100%;
      display: block;
      height: 7rem;
      // position: fixed;
      position: absolute;
      top: 0;
      left: 0;
      z-index: -1;
      filter: blur(30px);
    }
  }

  .content {
    margin: 12px 10px;
    display: flex;
    align-content: space-between;
    justify-items: center;
    .playimg {
      width: 100px;
      height: 100px;
      position: relative;
      border-radius: 20px;
      // overflow: hidden;
      // box-sizing: border-box;
      .theimg{ 
      img {
        width: 100%;
        height: 100%;
        display: block;
        border-radius: 20px;
      } 
     }
      .playcount {
        span {
          position: absolute;
          color: #fff;
          display: flex;
          align-items: center;
          top: 8px;
          right: 6px;
          // padding: 5px 10px;
          border-radius: 30px;
          background-color: rgba(171, 173, 174, 0.2);
        }
      }
    }
    .contentRight {
      color: #fff;
      margin: 0px 0px 0 10px;
      .rightP_one {
        font-size: medium;
        margin-top: 6px;
        margin-bottom: 8px;
      }
      .rigth_img {
        display: flex;
        align-items: center;
        .authorimg {
          width: 30px;
          height: 30px;
          border-radius: 50%;
          display: block;
          margin-right: 5px;
        }
        .authorsp {
          color: #899bb5;
          font-size: small;
          margin-right: 6px;
        }
      }
      .rightP_two {
        margin: 0;
        display: flex;
        align-items: center;
        .spanone {
          width: 200px;
          overflow: hidden;
          white-space: nowrap;
          text-overflow: ellipsis;
          color: #899bb5;
          margin-top: 3px;
        }
      }
    }
  }

  .itemTopFooter {
    width: 100%;
    height: 100px;
    display: flex;
    justify-content: space-around;
    align-items: center;
    margin-top: 10px;
    .footerItem {
      width: 25%;
      height: 50%;
      display: flex;
      flex-direction: column;
      align-items: center;
      .icon {
        color: #fff;
        fill: #fff;
        width: 1rem;
        height: 1rem;
      }
      span {
        margin-top: 10px;
        color: #d9d7d7;
      }
    }
  }

  .itemMusicLi {
    width: 100%;
    height: 500px;
    background-color: #fff;
    // margin: 10px 10px 0 10px;
    border-top-left-radius: 20px;
    border-top-right-radius: 20px;
    .itemLit {
      width: 100%;
      height: 50px;
      display: flex;
      justify-content: space-between;
      align-items: center;

      .leftList {
        margin-left: 10px;
        width: 200px;
        height: 100%;
        display: flex;
        align-items: center;
        // justify-content: space-between;
        .icon{
          margin-left: 0.26667rem;
    width: 50px;
    height: 100%;
    display: flex;
    align-items: center;
    line-height: 50px;
        }
        span {
          width: 300px;
          // display: flex;
          font-weight: 800;
          // align-items: center;
          margin-left: 10px;
          color: #4c4e43;
          font-size: medium;
          span {
            width: 100%;
            font-weight: 300;
            font-size: small;
          }
        }
      }
      .RightList {
        color: #d6d0cb;
        margin-right: 10px;
        display: flex;
        padding: 8px 15px;
        align-items: center;
        background-color: #fd351d;
        border-radius: 30px;
        span {
          margin-left: 5px;
        }
      }
    }
    .allite {
      // width: 100%;
      display: flex;
      align-items: center;
      justify-content: space-between;
      .iteLis {
        
        // height: 60px;
        display: flex;
        align-items: center;
        justify-content: space-between;
        .item {
          margin-left: 10px;
          display: flex;
          align-items: center;
          .theitemLeft {
            .leftSpan {
              font-size: medium;
              font-weight: 600;
              margin-right: 10px;
              color: #4d4d4e;
            }
          }
          .musicsong {
            word-wrap: break-word;
              *word-break: break-all;
              width: 220px;

            p {
              white-space: pre-wrap;
              width: 210px;
              //  width: 80%;
              //有特殊字符只显示一行
              word-wrap: break-word;
              font-size: medium;
              font-weight: 900;
              margin: 6px 0;
            }
            span {
              font-size: small;
              color: #bdbdbd;
            }
          }
        }
      }
      .theitemRight {
        margin-right: 10px;
        display: flex;
        align-items: center;
        .bofang {
          margin-right: 10px;
        }
      }
    }
  }
}
</style>
